<template>
	<view class="container">
		<!-- <view class="header">
			<gzSearchInput :placeholder="'请输入区县搜索'" @onSearchHandle="onSearchHandle"/>
			<AgentDisplay />
		</view>
		<view class="main">
			<IndexList :letters="letters" idValue="areaId" nameValue="areaName" :currentCity="currentCity" :hotCity="hotCity" :cityList="cityList"/>
		</view> -->
		<IndexList :letters="letters" idValue="agentNo" nameValue="agentName" :isCurrentCity="false" :isHotCity="false"
			:cityList="cityList" :indexAcColor="'#24c789'" @haoTap="onSelectHandle">
			<template #currentHistory>
				<view class="current">
					<AgentDisplay ref="agentDisplayRef" :isShowRight="false"/>
				</view>
				<view class="history" v-if="historyList.length > 0">
					<view class="title">最近访问</view>
					<view class="list">
						<view class="item" v-for="(item,index) in historyList" :key="index" @click="onSelectHandle(item)">{{ item.agentName }}</view>
					</view>
				</view>
			</template>
		</IndexList>
	</view>
</template>

<script setup>
	import { ref, getCurrentInstance, onMounted } from 'vue'
	import AgentDisplay from '@/pages/index/components/AgentDisplay.vue'
	import IndexList from '@/pages/agentSelect/components/IndexList.vue'
	import storageManage from '@/util/storageManage.js'
	// #ifdef MP-YHDD
	import cities from '@/pages/agentSelect/cityListJL.json'
	const letters = ref(['B', 'C', 'J', 'L', 'S', 'T', 'Y'])
	// #endif
	// #ifndef MP-YHDD
	import cities from '@/pages/agentSelect/cityListHN.json'
	const letters = ref(['A', 'H', 'J', 'K', 'L', 'N', 'P', 'S', 'X', 'Z'])
	// #endif
	
	// import cities from '@/pages/agentSelect/cityListJL.json'
	// const letters = ref(['B', 'C', 'J', 'L', 'S', 'T', 'Y'])
	
	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties
	
	// 当前展示位置实例
	const agentDisplayRef = ref()
	
	const cityList = ref(cities)
	
	const historyList = ref([])
	
	onMounted(() => {
		// 读取本地缓存 是否有历史访问信息
		if(storageManage.agentHistory()){
			historyList.value = storageManage.agentHistory() || []
		}
	})

	/* function onSearchHandle(searchText) {
		if (!searchText) {
			$infoBox.toast('请输入要搜索的区县')
			return
		}
		// 根据文字进行搜索 ----
	} */
	
	// 地区选择事件
	function onSelectHandle(e){
		// 如果当前定位和选择的定位相同不进行任何操作
		if(e.agentNo === agentDisplayRef.value.getCurrentAgentInfo().agentNo){
			return
		}
		// 通知外部更新
		uni.$emit('UPDATE_AGENT_INFO',e)
		// 更新当前定位
		agentDisplayRef.value.onChangeAgentInfo(e)
		// 更新历史访问
		updateHistoryList(e)
		// 跳转首页
		uni.navigateBack()
	}
	
	// 更新历史访问信息
	const maxLengh = 3;	// 本地最大缓存历史访问记录条数
	function updateHistoryList(e){
		// 去除重复项
		try {
			historyList.value.forEach((item,index) => {
				if(item.agentNo === e.agentNo){
					historyList.value.splice(index,1)
				}
			})
		} catch (error) {}
		// 判断是否超出最大限制
		if(historyList.value.length >= maxLengh){
			historyList.value.pop()
		}
		historyList.value.unshift(e)
		// 本地缓存
		storageManage.agentHistory(historyList.value)
	}
</script>

<style lang="less" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background: #F5F6FA;

		.header {
			background: #fff;
			padding: 0 32rpx;
		}

		.current {
			width: 94%;
			margin: 0 auto;
		}

		.history {
			background: #F5F6FA;
			padding: 24rpx 3%;
			display: flex;
			flex-direction: column;
			gap: 24rpx;

			.title {
				color: #999999;
				font-size: 24rpx;
			}

			.list {
				display: flex;
				flex-wrap: wrap;
				gap: 24rpx;

				.item {
					background: #fff;
					border-radius: 8rpx;
					font-size: 28rpx;
					padding: 5rpx 15rpx;
				}
			}
		}
	}
</style>